import { useEffect, useCallback } from 'react'
import router from 'umi/router'
import { WingBlank, WhiteSpace } from 'antd-mobile'
import { Icon, message } from 'antd'

import Wait_ from '@/components/wait'
import service from '@/services'
import '@/md5'
import styles from './index.scss'

const { SAQuery, SBIworkday } = service

export default () => {
  const openId = localStorage.getItem('openId')

  useEffect(() => {
    isBinded() // 是否绑定手机号
  }, [])

  const isBinded = useCallback(() => { // 检测用户是否绑定手机号
    SAQuery({
      sign: `${openId}$$##1234ech**`.MD5(32),
      data: openId
    })
      .then(res => {
        if (!res.success) {
          message.warn('未检测到用户信息，请先登录')
          setTimeout(() => {
            router.push(`/register`)
          })
        } else {
          localStorage.setItem('openId', res.data.openId)
        }
      })
      .catch(err => {
        console.log(err)
      })
  }, [openId])

  const onTakeClick = useCallback(() => { // 在线取号回调，此处需要判断是否是工作日
    SBIworkday({
      sign: `${openId}$$##1234ech**`.MD5(32),
      data: openId
    })
      .then(res => {
        if (res.success) {
          router.push(`/outlets?type=2`)
        } else {
          message.warn('当前非工作日，请改日取号~')
        }
      })
  }, [])

  return (
    <WingBlank size="lg">
      <WhiteSpace size="lg" />
      <div className={styles.box}>
        <div onClick={() => router.push(`/outlets?type=1`)}>
          <Icon type="bulb" />
          <div className={styles.title}>预约</div>
          {/* <div className={styles.desc}>在线激活前，必须提前预约</div> */}
        </div>
        <div onClick={onTakeClick}>
          <Icon type="user" />
          <div className={styles.title}>在线取号</div>
          {/* <div className={styles.desc}>进行上线取号，必须到达网点</div> */}
        </div>
        {/* <div onClick={() => router.push(`/appointment`)}>
          <Icon type="bulb" />
          <div className={styles.title}>在线激活</div>
          <div className={styles.desc}>在线激活前，必须提前预约</div>
        </div> */}
        <div onClick={() => router.push(`/history`)}>
          <Icon type="history" />
          <div className={styles.title}>历史记录</div>
          {/* <div className={styles.desc}>查看历史记录</div> */}
        </div>
      </div>
      <Wait_ />
    </WingBlank>
  )
}
